<template>
	<view class="container">
		<!-- 收货地址 -->
		<view class="address-section" @click="selectAddress">
			<view class="address-info">
				<view class="address-left">
					<view class="location-icon">📍</view>
					<view class="address-details">
						<view class="contact-info">
							<text class="name">{{address.name}}</text>
							<text class="phone">{{address.phone}}</text>
						</view>
						<text class="address-text">{{address.address}}</text>
					</view>
				</view>
				<view class="address-right">
					<view class="arrow">></view>
				</view>
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="products-section">
			<view class="section-title">商品信息</view>
			<view class="product-item" v-for="(product, index) in products" :key="index">
				<image class="product-image" :src="product.image" mode="aspectFill"></image>
				<view class="product-info">
					<text class="product-name">{{product.name}}</text>
					<text class="product-spec">{{product.specification}}</text>
					<view class="product-price">
						<text class="price">¥{{product.price}}</text>
						<text class="quantity">x{{product.quantity}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 优惠券 -->
		<view class="coupon-section" @click="selectCoupon">
			<view class="section-title">优惠券</view>
			<view class="coupon-info">
				<text class="coupon-text">{{selectedCoupon ? selectedCoupon.name : '选择优惠券'}}</text>
				<view class="coupon-right">
					<text class="coupon-value" v-if="selectedCoupon">-¥{{selectedCoupon.value}}</text>
					<view class="arrow">></view>
				</view>
			</view>
		</view>

		<!-- 配送方式 -->
		<view class="delivery-section">
			<view class="section-title">配送方式</view>
			<view class="delivery-options">
				<view class="delivery-option" :class="{ active: deliveryMethod === 'express' }" @click="selectDelivery('express')">
					<text class="option-name">快递配送</text>
					<text class="option-fee">¥{{deliveryFee}}</text>
				</view>
				<view class="delivery-option" :class="{ active: deliveryMethod === 'self' }" @click="selectDelivery('self')">
					<text class="option-name">到店自提</text>
					<text class="option-fee">免费</text>
				</view>
			</view>
		</view>

		<!-- 订单金额 -->
		<view class="amount-section">
			<view class="amount-item">
				<text class="amount-label">商品金额</text>
				<text class="amount-value">¥{{productAmount}}</text>
			</view>
			<view class="amount-item">
				<text class="amount-label">运费</text>
				<text class="amount-value">¥{{deliveryFee}}</text>
			</view>
			<view class="amount-item" v-if="couponDiscount > 0">
				<text class="amount-label">优惠券</text>
				<text class="amount-value">-¥{{couponDiscount}}</text>
			</view>
			<view class="amount-item total">
				<text class="amount-label">实付金额</text>
				<text class="amount-value">¥{{totalAmount}}</text>
			</view>
		</view>

		<!-- 底部提交按钮 -->
		<view class="bottom-submit">
			<view class="submit-info">
				<text class="total-text">合计: ¥{{totalAmount}}</text>
			</view>
			<button class="submit-btn" @click="submitOrder">提交订单</button>
		</view>
	</view>
</template>

<script>
	import Navigation from '@/utils/navigation.js';
	
	export default {
		data() {
			return {
				address: {
					name: '张三',
					phone: '138****8888',
					address: '湖南省长沙市岳麓区某某街道某某小区1栋1单元101室'
				},
				products: [
					{
						image: '/static/product1.png',
						name: '秒杀豆蟹黄味2.5KG/袋',
						specification: '1箱*2袋*约155小包',
						price: '20.9',
						quantity: 66
					},
					{
						image: '/static/product2.png',
						name: '特价 30度1件+即酒45度1件(组合促销装)',
						specification: '一组',
						price: '345.9',
						quantity: 1
					}
				],
				selectedCoupon: null,
				deliveryMethod: 'express',
				deliveryFee: '10.00',
				productAmount: '366.8',
				couponDiscount: 0
			}
		},
		computed: {
			totalAmount() {
				const delivery = this.deliveryMethod === 'express' ? parseFloat(this.deliveryFee) : 0;
				const coupon = this.couponDiscount || 0;
				return (parseFloat(this.productAmount) + delivery - coupon).toFixed(2);
			}
		},
		onLoad(options) {
			// 接收从购物车传递的参数
			if (options.products) {
				try {
					this.products = JSON.parse(decodeURIComponent(options.products));
				} catch (e) {
					console.log('解析商品数据失败:', e);
				}
			}
			if (options.totalPrice) {
				this.productAmount = options.totalPrice;
			}
		},
		methods: {
			selectAddress() {
				Navigation.goToAddress({ mode: 'select' });
			},
			selectCoupon() {
				Navigation.goToCoupon({ mode: 'select' });
			},
			selectDelivery(method) {
				this.deliveryMethod = method;
				this.deliveryFee = method === 'express' ? '10.00' : '0.00';
			},
			submitOrder() {
				// 验证必填信息
				if (!this.address.name) {
					uni.showToast({
						title: '请选择收货地址',
						icon: 'none'
					});
					return;
				}

				// 生成订单号
				const orderId = 'YT' + Date.now() + Math.random().toString(36).substr(2, 9);
				
				// 跳转到支付页面
				Navigation.goToPayment({
					orderId: orderId,
					amount: this.totalAmount,
					productAmount: this.productAmount,
					deliveryFee: this.deliveryFee,
					couponDiscount: this.couponDiscount.toString()
				});
			}
		}
	}
</script>

<style scoped>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
	padding-bottom: 120rpx;
}

/* 收货地址 */
.address-section {
	background-color: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.address-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.address-left {
	display: flex;
	align-items: flex-start;
	gap: 20rpx;
	flex: 1;
}

.location-icon {
	font-size: 40rpx;
	color: #ff6b35;
	margin-top: 5rpx;
}

.address-details {
	flex: 1;
}

.contact-info {
	display: flex;
	align-items: center;
	gap: 20rpx;
	margin-bottom: 10rpx;
}

.name {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
}

.phone {
	font-size: 26rpx;
	color: #666;
}

.address-text {
	font-size: 26rpx;
	color: #333;
	line-height: 1.4;
}

.address-right {
	display: flex;
	align-items: center;
}

.arrow {
	font-size: 24rpx;
	color: #999;
}

/* 商品列表 */
.products-section {
	background-color: #fff;
	margin-bottom: 20rpx;
	padding: 30rpx;
}

.section-title {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
	margin-bottom: 20rpx;
}

.product-item {
	display: flex;
	gap: 20rpx;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.product-item:last-child {
	border-bottom: none;
}

.product-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 10rpx;
}

.product-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.product-name {
	font-size: 28rpx;
	color: #333;
	line-height: 1.4;
}

.product-spec {
	font-size: 24rpx;
	color: #999;
}

.product-price {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.price {
	font-size: 28rpx;
	color: #ff4757;
	font-weight: bold;
}

.quantity {
	font-size: 24rpx;
	color: #666;
}

/* 优惠券 */
.coupon-section {
	background-color: #fff;
	margin-bottom: 20rpx;
	padding: 30rpx;
}

.coupon-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.coupon-text {
	font-size: 28rpx;
	color: #333;
}

.coupon-right {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.coupon-value {
	font-size: 26rpx;
	color: #ff4757;
}

/* 配送方式 */
.delivery-section {
	background-color: #fff;
	margin-bottom: 20rpx;
	padding: 30rpx;
}

.delivery-options {
	display: flex;
	flex-direction: column;
	gap: 15rpx;
}

.delivery-option {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	border: 2rpx solid #f0f0f0;
	border-radius: 10rpx;
	transition: all 0.3s ease;
}

.delivery-option.active {
	border-color: #ff6b35;
	background-color: #fff5f0;
}

.option-name {
	font-size: 28rpx;
	color: #333;
}

.option-fee {
	font-size: 26rpx;
	color: #ff4757;
}

/* 订单金额 */
.amount-section {
	background-color: #fff;
	margin-bottom: 20rpx;
	padding: 30rpx;
}

.amount-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15rpx 0;
}

.amount-item.total {
	border-top: 1rpx solid #f0f0f0;
	margin-top: 15rpx;
	padding-top: 20rpx;
}

.amount-label {
	font-size: 26rpx;
	color: #666;
}

.amount-value {
	font-size: 26rpx;
	color: #333;
}

.amount-item.total .amount-value {
	color: #ff4757;
	font-weight: bold;
	font-size: 32rpx;
}

/* 底部提交按钮 */
.bottom-submit {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	padding: 20rpx 30rpx;
	border-top: 1rpx solid #f0f0f0;
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.submit-info {
	flex: 1;
}

.total-text {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
}

.submit-btn {
	flex: 1;
	background-color: #ff6b35;
	color: white;
	border: none;
	padding: 25rpx;
	border-radius: 25rpx;
	font-size: 32rpx;
	font-weight: bold;
	transition: all 0.3s ease;
}

.submit-btn:active {
	background-color: #ff8c42;
	transform: scale(0.98);
}
</style>